<template>
  <div class="content">
    <p style="height: 16rpx"></p>
    <div class="member_box">
      <div class="member">
        <img
          @click="seeUser(item)"
          v-for="item in list"
          :key="item.id"
          :src="item.avatar ? item.avatar : '/static/mr_tx.png'"
        />
        <button class="anniu" open-type="share">
          <u-icon name="plus" color="#999999" size="22"></u-icon>
        </button>
      </div>
      <p class="more" @click="toUser">查看更多群成员 ></p>
    </div>
    <div class="list">
      <div>
        <img src="/static/group-icon1.png" alt="" />
        <div class="msg">
          <p class="name">我的ID</p>
          <div class="text" @click="copyId(userInfo.id)">
            {{ userInfo.id }}
            <img src="/static/group-icon2.png" alt="" />
          </div>
        </div>
        <p class="line"></p>
      </div>
    </div>

    <div class="list">
      <div @click="toWallet">
        <img src="/static/group-icon3.png" alt="" />
        <div class="msg">
          <p class="name">我的钱包</p>
          <div class="text">
            <p>￥{{ balance }}</p>
            <u-icon name="arrow-right" color="#999999" size="14"></u-icon>
          </div>
        </div>
        <p class="line"></p>
      </div>
      <div>
        <img src="/static/group-icon6.png" alt="" />
        <div class="msg">
          <p class="name">我的接单区域</p>
          <div class="text" @click="addJd">
            <p>{{ userInfo.groupName ? userInfo.groupName + "群" : "暂无" }}</p>
            <u-icon name="arrow-right" color="#999999" size="14"></u-icon>
          </div>
        </div>
        <p class="line"></p>
      </div>
      <div @click="toMy">
        <img src="/static/group-icon4.png" alt="" />
        <div class="msg">
          <p class="name">我的个人资料</p>
          <div class="text">
            <p>
              <img
                :src="userInfo.avatar ? userInfo.avatar : '/static/mr_tx.png'"
                alt=""
              />{{ userInfo.nickname }}
            </p>
            <u-icon name="arrow-right" color="#999999" size="14"></u-icon>
          </div>
        </div>
        <p class="line"></p>
      </div>
      <div @click="clickTips">
        <img src="/static/group-icon5.png" alt="" />
        <div class="msg">
          <p class="name">查找聊天内容</p>
          <div class="text">
            <p></p>
            <u-icon name="arrow-right" color="#999999" size="14"></u-icon>
          </div>
        </div>
        <p class="line"></p>
      </div>
    </div>

    <!-- 选择接单群 -->
    <!-- <city-picker :isRefresh1="isRefresh1" :show="isCityShow" @closeCity="closeCity" @confirm="changeCity"></city-picker> -->

    <u-picker
      :defaultIndex="currentIndex"
      @cancel="closePop"
      @close="closePop"
      closeOnClickOverlay
      title="选择接单群"
      :show="show"
      :columns="columns"
      keyName="name"
      @confirm="changeCity"
    ></u-picker>


    <u-popup round="10" mode="bottom" :show="userMsgShow" @close="userMsgShow = false">
            <div class="user-msg">
				<img :src="userMsg.avatar?userMsg.avatar:'/static/mr_tx.png'" alt="">
				<div class="msg">
					<p class="name">用户昵称：{{userMsg.nickname}}</p>
					<div>
						<p class="text">用户编号：{{userMsg.id}}</p>
						<p class="text">微信号：{{userMsg.wechatId && userMsg.wechatId!== 'null'?userMsg.wechatId:'暂无~'}}</p>
					</div>
				</div>
			</div>
		</u-popup>
  </div>
</template>

<script>
import { mapState } from "vuex"
import api from "@/api"
export default {
  data() {
    return {
      userMsgShow: false,
      show: false,
      currentIndex: [1],
      columns: [],
      columnData: [],
      param: {
        pageNo: 0,
        pageSize: 23,
        groupId: 1,
      },
      list: [],
      userMsg: {},
      userInfo: this.$getStorage("userInfo") || {},
      shareUserId: "",
      walletInfo: null,
    }
  },
  computed: {
    ...mapState({
      userId: (state) => state.user.userId,
      token: (state) => state.user.token,
    }),
    balance() {
      return this.walletInfo && (this.walletInfo.balance / 100).toFixed(2)
    },
  },
  methods: {

    seeUser(item) {
      console.log(item)
      this.userMsgShow = true
      this.userMsg = item
    },

    clickTips() {
      // this.$toast("该功能即将上线！")
      uni.navigateTo({
        url: "/pages/chathistory/index",
      })
    },

    // 获取列表
    getList() {
      api.user.sell_group().then((res) => {
        if (res.code == 200) {
          this.columns = [res.data]
          this.currentIndex = [
            res.data.findIndex((item) => item.id == this.userInfo.groupId),
          ]
        }
      })
    },

    // 确定接单群
    changeCity(e) {
      console.log(e)
      let data = {
        groupId: e.value[0].id,
      }
      api.user.update_user(data).then((res) => {
        if (res.code == 200) {
          this.show = false
          this.getUserInfo()
        } else {
          this.$toast(res.msg)
        }
      })
    },

    // 关闭刷单群弹窗
    closePop() {
      this.show = false
    },

    addJd() {
      if (!this.token) {
        uni.navigateTo({
          url: `/pages/authorization/index?shareUserId=${this.shareUserId}`,
        })
        return
      }
      this.show = true
    },

    // 复制id
    copyId(id) {
      uni.setClipboardData({
        data: `${id}`,
        success: () => {
          this.$toast("复制成功~")
        },
        fail: () => {
          this.$toast("复制失败!")
        },
      })
    },

    toUser() {
      if (!this.token) {
        uni.navigateTo({
          url: `/pages/authorization/index?shareUserId=${this.shareUserId}`,
        })
        return
      }
      uni.navigateTo({
        url: `/pages/group/user/index?groupId=${this.param.groupId}`,
      })
    },

    toWallet() {
      if (!this.token) {
        uni.navigateTo({
          url: `/pages/authorization/index?shareUserId=${this.shareUserId}`,
        })
        return
      }
      uni.navigateTo({
        url: "/pages/wallet/index",
      })
    },

    toMy() {
      if (!this.token) {
        uni.navigateTo({
          url: `/pages/authorization/index?shareUserId=${this.shareUserId}`,
        })
        return
      }
      uni.navigateTo({
        url: "/pages/my/index",
      })
    },

    async getGroupUserList() {
      await api.user.sell_group_user(this.param).then((res) => {
        if (res.code == 200) {
          this.list = res.data.list

          uni.setNavigationBarTitle({
            title: `群成员（${res.data.total}）`,
          })
        }
      })
    },

    async getUserInfo() {
      await api.user
        .sell_user({
          userId: this.userId,
        })
        .then((res) => {
          if (res.code == 200) {
            this.$setStorage("userInfo", res.data)
            this.userInfo = res.data
            // this.getList()
          }
        })
    },
    //获取钱包信息  totalExpense_累计支出  totalRecharge_累计充值
    async getWallet() {
      const res = await api.wallet.get()
      this.walletInfo = res?.data
      // uni.setStorageSync('walletObj', this.walletInfo)
      this.$setStorage("walletObj", this.walletInfo)
    },
  },
  onLoad(options) {
    if (options.shareUserId) {
      this.shareUserId = options.shareUserId
    }
    this.param.groupId = options.groupId ? options.groupId : 1
  },
  onShow() {
    this.getUserInfo()
    this.getGroupUserList()
    this.getList()
    this.getWallet()
  },
  onShareAppMessage() {
    return {
      title: "免费用万人接单群",
      path: `/pages/group/index?shareUserId=${this.userId}`,
    }
  },
}
</script>

<style lang="scss" scoped>
.content {
  min-height: 100vh;
  background: #f7f7f7;

  .member_box {
    padding: 0 26rpx 26rpx 26rpx;
    background: #fff;
    border-radius: 12rpx;
    margin: 0 30rpx;

    .member {
      display: flex;
      flex-wrap: wrap;

      img {
        display: block;
        width: 84rpx;
        height: 84rpx;
        border-radius: 8rpx;
        margin: 18rpx 26rpx 0 0;

        &:nth-child(6n) {
          margin-right: 0;
        }
      }

      .anniu {
        width: 42px;
        height: 42px;
        border-radius: 4px;
        box-sizing: border-box;
        border: 1px dashed #999999;
        background: none;
        margin: 18rpx 0 0 0;
        display: flex;
        align-items: center;
        justify-content: center;

        &::after {
          border: none;
        }
      }
    }

    .more {
      text-align: center;
      font-size: 26rpx;
      margin-top: 30rpx;
      color: #999999;
    }
  }

  .list {
    margin: 20rpx 30rpx 40rpx 30rpx;

    & > div {
      display: flex;
      align-items: center;
      height: 96rpx;
      border-radius: 8rpx;
      background: #ffffff;
      padding: 0 20rpx;
      position: relative;

      &:last-child {
        .line {
          display: none;
        }
      }

      & > img {
        width: 40rpx;
        height: 40rpx;
        margin-right: 28rpx;
      }

      .msg {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 28rpx;
        font-weight: 500;
        color: #333333;

        .text {
          color: #999999;
          font-weight: 400;
          display: flex;
          align-items: center;

          p {
            margin-right: 12rpx;
            display: flex;
            align-items: center;

            img {
              width: 32rpx;
              height: 32rpx;
              border-radius: 50%;
              margin-right: 10rpx;
            }
          }

          img {
            width: 28rpx;
            height: 28rpx;
            margin-left: 12rpx;
          }
        }
      }

      .line {
        width: 88%;
        height: 1px;
        position: absolute;
        bottom: 0;
        right: 0;
        background: #efefef;
      }
    }
  }
  .user-msg {
    display: flex;
    padding: 40rpx 30rpx;
    img {
      width: 140rpx;
      height: 140rpx;
      border-radius: 8rpx;
    }
    .msg {
      margin-left: 24rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .name {
        font-weight: 500;
        font-size: 34rpx;
        color: #333333;
      }
      .text {
        font-size: 30rpx;
        color: #999999;
        margin-top: 6rpx;
      }
    }
  }
}
</style>
